/**index.less**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  width: 750rpx;
  background: linear-gradient(90deg, rgba(255, 253, 244, 0.63) 0%, rgba(253, 247, 225, 0.63) 100%), #FFFFFF;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  overflow: hidden;
}
.detailBox1 {
  padding: 00rpx 60rpx;
  margin-bottom: 30rpx;
  .text {
    font-family: Noto Sans SC, Noto Sans SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #485166;
    font-style: normal;
  }
}
.scrollarea {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.headBox {
  position: relative;

  .header_bg {
    width: 100%;
    height: 400rpx;
    border-radius: 0 0 40rpx 40rpx;
    background-image: url(https://report.bayajk.com/baya_health/static/temporary/reportDetailBg2.png);
    /* 设置背景图的路径 */
    background-size: cover;
    /* 背景图覆盖整个元素 */
    background-position: center;
    /* 背景图居中 */
    background-repeat: no-repeat;
    /* 背景图不重复 */
  }

  .infoBox {
    position: absolute;
    width: 100%;
    height: 100rpx;
    top: 120rpx;
    display: flex;

    .headerImg {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      /* 设置背景图的路径 */
      background-size: cover;
      /* 背景图覆盖整个元素 */
      background-position: center;
      /* 背景图居中 */
      background-repeat: no-repeat;
      /* 背景图不重复 */
    }

    .logoBox {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      padding-right: 32rpx;
    }

    .logo {
      width: 100rpx;
      height: 100rpx;
      background-image: url(https://report.bayajk.com/baya_health/static/temporary/BayaLogo.png);
      /* 设置背景图的路径 */
      background-size: cover;
      /* 背景图覆盖整个元素 */
      background-position: center;
      /* 背景图居中 */
      background-repeat: no-repeat;
      /* 背景图不重复 */
    }

    .infoTextBox {
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .name {
        font-family: Noto Sans SC, Noto Sans SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #2A220E;
        font-style: normal;
        text-transform: none;
      }

      .text {
        font-family: Noto Sans SC, Noto Sans SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
        font-style: normal;
        text-transform: none;
      }
    }
  }
}

.container_box {
  margin-top: -100rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(90deg, rgba(244, 250, 255, 0.63) 0%, rgba(225, 240, 253, 0.63) 100%), #FFFFFF;
  padding: 0 32rpx;
  padding-bottom: 150rpx;

  .main_content {
    flex: 1;
    width: 100%;

    .headBox_package {
      position: relative;
      z-index: 2;
      margin-bottom: 32rpx;
      padding: 32rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 0rpx 33rpx 0rpx rgba(199, 142, 31, 0.18);
      border-radius: 20rpx 20rpx 20rpx 20rpx;

      .headBox_package_title {
        font-family: Noto Sans SC, Noto Sans SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #2A220E;
        font-style: normal;
        text-transform: none;
      }

      .headBox_package_infoText {
        margin-top: 16rpx;
        font-family: Inter, Inter;
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
        font-style: normal;
        text-transform: none;
      }
    }

    .item_card_box {
      // margin-bottom: 20rpx;

      .headTitleBox {
        height: 72rpx;
        width: 100%;
        background: linear-gradient(270deg, #E6EDF2 0%, #E3E6F0 100%);
        display: flex;
        justify-content: space-between;

        .headTitleBoxItem {
          flex: 1;
          height: 100%;
          font-family: Noto Sans SC, Noto Sans SC;
          font-weight: 500;
          font-size: 25rpx;
          color: #172B4D;
          display: flex;
          justify-content: center;
          align-items: center;

          &:first-child {
            margin-left: 20rpx;
            flex: 1.5;
            justify-content: flex-start;
          }
        }
      }


    }
  }
}

.item_card_box_contentBox {
  margin-top: 32rpx;
  min-height: 50rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 0rpx 33rpx 0rpx rgba(199, 142, 31, 0.18);
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  padding: 32rpx;

  .item_card_box_contentBox_title {
    display: flex;
    margin-bottom: 32rpx;

    .titleBg {
      width: 60rpx;
      height: 40rpx;
      background-image: url(https://report.bayajk.com/baya_health/static/temporary/titleBg2.png);
      /* 设置背景图的路径 */
      background-size: cover;
      /* 背景图覆盖整个元素 */
      background-position: center;
      /* 背景图居中 */
      background-repeat: no-repeat;
      /* 背景图不重复 */
    }

    .titleText {
      margin-left: -56rpx;
      height: 48rpx;
      font-family: Noto Sans SC, Noto Sans SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #2A220E;
      line-height: 48rpx;
      text-align: justified;
      font-style: normal;
      text-transform: none;
    }
  }

  .item_card_box_contentBox_childItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    background: linear-gradient(270deg, #F9F9F9 0%, #F5F6FA 100%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    padding-left: 20rpx;
    font-family: Noto Sans SC, Noto Sans SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #485166;

    .childItem1 {
      flex: 1.5;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-family: Noto Sans SC, Noto Sans SC;
      font-weight: 400;
      font-size: 25rpx;
      color: #485166;
    }

    .childItem2 {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: Noto Sans SC, Noto Sans SC;
      font-weight: 400;
      font-size: 25rpx;
      color: #2A220E;
    }

    .childItem3 {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: Noto Sans SC, Noto Sans SC;
      font-weight: 400;
      font-size: 25rpx;
      color: #2A220E;
    }

    .childItem4 {
      flex: 0.5;
      color: #1992ff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .childItem_left {
      font-family: Noto Sans SC, Noto Sans SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #485166;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .childItem_right {
      display: flex;
      align-items: center;

      .childItem_right_text {
        font-family: Noto Sans SC, Noto Sans SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #515151;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .childItem_right_tag {
        margin: 0 20rpx;
        width: 128rpx;
        height: 44rpx;
        background: #E9C354;
        border-radius: 28rpx 28rpx 28rpx 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Noto Sans SC, Noto Sans SC;
        font-weight: 400;
        font-size: 22rpx;
        color: #FFFFFF;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }

      .childItem_right_icon {
        height: 20rpx;
        width: 12rpx;
        background-image: url(https://report.bayajk.com/baya_health/static/temporary/arrowRight.png);
        /* 设置背景图的路径 */
        background-size: cover;
        /* 背景图覆盖整个元素 */
        background-position: center;
        /* 背景图居中 */
        background-repeat: no-repeat;
        /* 背景图不重复 */
      }
    }
  }

  .item_card_box_contentBox_childItem2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    background: linear-gradient(270deg, #F9F9F9 0%, #F5F6FA 100%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    padding: 0 32rpx;

    .childItem_left {
      display: flex;
      font-family: Noto Sans SC, Noto Sans SC;
      font-weight: 500;
      font-size: 28rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;

      .text1 {
        color: #485166;
      }

      .text2 {
        color: #999999;
        font-weight: 400;
      }
    }

    .childItem_right_icon {
      width: 25rpx;
      height: 15rpx;
      background-image: url(https://report.bayajk.com/baya_health/static/temporary/arrowRight.png);
      /* 设置背景图的路径 */
      background-size: cover;
      /* 背景图覆盖整个元素 */
      background-position: center;
      /* 背景图居中 */
      background-repeat: no-repeat;
      /* 背景图不重复 */
    }
  }

  .line {
    margin: 0 32rpx;
    height: 1rpx;
    background: #EEEEEE;
  }

  .detailsItems {
    background: linear-gradient(270deg, #F9F9F9 0%, #F5F6FA 100%);

    .detailsItems_titleBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 90rpx;
      width: 100%;

      .detailsItems_titleBox_item {
        width: 33.33%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Noto Sans SC, Noto Sans SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #172B4D;
      }
    }

    .detailsItems_child {
      display: flex;
      justify-content: space-between;
      padding-bottom: 36rpx;

      .detailsItems_child_item1 {
        display: flex;
        justify-content: center;
        width: 33.33%;
        font-family: Noto Sans SC, Noto Sans SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #485166;
      }

      .detailsItems_child_item2 {
        display: flex;
        justify-content: center;
        width: 33.33%;
        font-family: Noto Sans SC, Noto Sans SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #06B2F0;
      }

      .childItem_left {
        font-family: Noto Sans SC, Noto Sans SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #485166;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .childItem_right {
        display: flex;
        align-items: center;

        .childItem_right_text {
          font-family: Noto Sans SC, Noto Sans SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #515151;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        .childItem_right_tag {
          margin: 0 20rpx;
          width: 128rpx;
          height: 44rpx;
          background: #E9C354;
          border-radius: 28rpx 28rpx 28rpx 28rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: Noto Sans SC, Noto Sans SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #FFFFFF;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
      }
    }
  }

  .explainText {
    margin-bottom: 28rpx;
    font-family: Noto Sans SC, Noto Sans SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #7A869A;
    line-height: 48rpx;
    text-align: justified;
    font-style: normal;
    text-transform: none;
  }

  .remarksText1 {
    margin-bottom: 16rpx;
    font-family: Noto Sans SC, Noto Sans SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #2A220E;
    text-align: justified;
    font-style: normal;
    text-transform: none;
  }

  .remarksText2 {
    font-family: Inter, Inter;
    font-weight: 400;
    font-size: 24rpx;
    color: #666666;
    text-align: justified;
    font-style: normal;
    text-transform: none;
  }
}

.detailsModalBox {
  height: 70vh;
  display: flex;
  flex-direction: column;

  .headBox {
    width: 100%;
    display: flex;
    justify-content: flex-end;

    .closeIconBox {
      margin-top: 32rpx;
      height: 70rpx;
      width: 100rpx;
      display: flex;
      justify-content: flex-end;
      padding-right: 32rpx;

      .closeIcon {
        width: 40rpx;
        height: 40rpx;
      }
    }

  }

  .contentBox {
    margin-top: -32rpx;
    overflow-y: auto;
    .title {
      font-family: Noto Sans SC, Noto Sans SC;
      font-weight: 500;
      font-size: 36rpx;
      color: #172B4D;
      text-align: center;
      font-style: normal;
      text-transform: none;
      margin-bottom: 16rpx;
    }

    .valueText {
      font-family: Noto Sans SC, Noto Sans SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #7A869A;
      text-align: center;
      font-style: normal;
      text-transform: none;
      margin-bottom: 40rpx;
    }

    .main_content {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: left;
      overflow: auto;

      .title2 {
        margin-left: 40rpx;
        margin-bottom: 16rpx;
        font-family: Noto Sans SC, Noto Sans SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #172B4D;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      
      .detailBox {
        margin: 0 40rpx;
        margin-bottom: 32rpx;
        background: #F4F5F7;
        border-radius: 30rpx 30rpx 30rpx 30rpx;
        padding: 26rpx 32rpx;
        display: flex;

        .detailBox_content {
          flex: 1;
          // margin: 26rpx 32rpx;

          .detailBox_content_row {
            display: flex;
            align-items: flex-start;
            margin-bottom: 16rpx;

            .icon {
              width: 40rpx;
              height: 40rpx;
              background-size: cover;
              /* 背景图覆盖整个元素 */
              background-position: center;
              /* 背景图居中 */
              background-repeat: no-repeat;
              /* 背景图不重复 */
            }

            .title {
              margin-left: 12rpx;
              font-family: Noto Sans SC, Noto Sans SC;
              font-weight: 500;
              font-size: 28rpx;
              color: #485166;
              font-style: normal;
              text-transform: none;
              white-space: nowrap;
            }

            .value {
              font-family: Noto Sans SC, Noto Sans SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #485166;
              font-style: normal;
              text-transform: none;
            }
          }

          .text {
            font-family: Noto Sans SC, Noto Sans SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #485166;
            line-height: 48rpx;
            text-align: justified;
            font-style: normal;
            text-transform: none;
          }
        }
      }
    }
  }
}